<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
<div class="app">
	<!-- <div>{{fn}}</div>
	{{apply()}}
	<div>
		一件衣服的价格<input type="text" v-model.number="total">打<input type="text" v-model.number="discount">折<br>
		折后{{zhe}}元，省{{sheng}}元
	</div>
	<table>
		<thead>
			<tr>
				<th>通缉犯姓名</th>
				<th>悬赏金额</th>
			</tr>
		</thead>
		<tbody>
			<tr v-for="item in data" :key="item.id">
				<td>{{item.name |p2(item.name)}}</td>
				<td>{{item.price |p1(item.price)}}</td>
			</tr>
		</tbody>
	</table>
	<div class="big" @click="da()">
		<div class="mid" @click="zho()">
			<div class="small" @click.stop="xi()"></div>
		</div>
	</div>
	<a href="../7.8/7.8.HTML" @click.prevent="ti()">7.8号的作业页面</a> -->
	<div>
		<button v-for="item in title" :key="item.id" @click="togo(item.id)">{{item.name}}</button>
		<div v-show="id==1">这是第一页<a href="../7.8/7.8.HTML" @click.prevent="tiao()">7.8作业</a></div>
		<div v-show="id==2">
			<div class="big" @click="da()">
				<div class="mid" @click.stop="zho()">
					<div class="small" @click="xi()">小</div>中
				</div>大
			</div>
		</div>
		<div v-show="id==3">3</div>
	</div>

	<div>
		<table>
			<thead>
				<tr>
					<th><input type="checkbox" :checked="all_check" @click="all()">全选</th>
					<th>名称</th>
					<th>价格</th>
					<th>数量</th>
					<th>小计</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="item in arr" :key="item.id">
					<td><input type="checkbox" @click="check(item)" :checked="item.is"></td>
					<td>{{item.name}}</td>
					<td>{{item.price |localstring(item.price)}}</td>
					<td>
						<button @click="jian('-',item)">-</button><span>{{item.num}}</span>
						<button@click="jian('+',item)">+</button>
					</td>
					<td>{{item.num*item.price}}</td>
				</tr>
			</tbody>
		</table>
		总价{{result}}元
	</div>

</div>
<script>
	// new Vue({
	// 	el: ".app",
	// 	data: {
	// 		num1: 8,
	// 		num2: 9,
	// 		arr: [1, 5, 7, 9],
	// 		data: [{ id: 1, name: "姚待举", price: 50000 }, { id: 2, name: "张宇辉", price: 30000 }, { id: 3, name: "张裕豪", price: 60000 }, { id: 4, name: "宋尧", price: 7888 }],
	// 		total: "",
	// 		discount: ""
	// 	},
	// 	methods: {
	// 		apply() {
	// 			return this.num1 * this.num2
	// 		},
	// 		da() {
	// 			console.log("大");
	// 		},
	// 		zho() {
	// 			console.log("中");
	// 		},
	// 		xi() {
	// 			console.log("小");
	// 		},
	// 		ti(){
	// 			console.log(666);
	// 		}
	// 	},
	// 	computed: {
	// 		fn() {
	// 			return this.arr.reduce((a, b) => a + b)
	// 		},
	// 		zhe() {
	// 			return this.total * this.discount * 0.1
	// 		},
	// 		sheng() {
	// 			return this.total - (this.total * this.discount * 0.1)
	// 		}
	// 	},
	// 	filters: {
	// 		p1(price) {
	// 			return "$" + price
	// 		},
	// 		p2(name) {
	// 			if (name.length == 2) {
	// 				return name[0] + "某"
	// 			}

	// 		}
	// 	}
	// })
	new Vue({
		el: ".app",
		data: {
			all_check: false,
			arr: [{
				id: 0,
				name: "小米10",
				price: 1998,
				num: 1,
				is: false
			}, {
				id: 1,
				name: "小米11",
				price: 2398,
				num: 1,
				is: false
			}, {
				id: 2,
				name: "小米12",
				price: 99998,
				num: 1,
				is: false
			}],
			title: [{ id: 1, name: "第一页" }, { id: 2, name: "第二页" }, { id: 3, name: "第三页" }],
			id: 1
		},
		methods: {
			togo(i) {
				this.id = i
			},
			tiao() {
				console.log(666);
			},
			da() {
				console.log("大");
			},
			zho() {
				console.log("中");
			},
			xi() {
				console.log("小");
			},
			jian(jia, item) {
				if (jia == '-' && item.num > 1) {
					item.num--
				} else if (jia == '+') {
					item.num++
				}
			},

			del(item) {
				var index = this.arr.findIndex(it => it == item)
				this.arr.splice(index, 1)
			},
			check(item) {
				if (item.is) {
					item.is = false
					this.all_check = false
				} else {
					item.is = true
					this.all_check = this.arr.every(item => item.is == true)
				}
			},
			all() {
				this.all_check = !this.all_check
				this.arr.forEach(item =>
					item.is = this.all_check
				)
			}
			// jian(id){
			// 	var a =  this.arr.find(item=>item.id==id)
			// 	if(a.num>0)
			// 	a.num--
			// },
			// jia(item){
			// 	item.num++
			// }
		},
		computed: {
			result() {
				var number = 0
				this.arr.forEach(item => {
					if (item.is) {
						number += item.price * item.num
					}
				});
				return number
			}
		},
		filters: {
			localstring(a, b) {
				return "￥" + a.toLocaleString('en-US')
			}
		}
	})
</script>
<style>
	.big {
		width: 200px;
		height: 200px;
		background-color: blue;
	}

	.mid {
		width: 150px;
		height: 150px;
		background-color: red;
	}

	.small {
		width: 100px;
		height: 100px;
		background-color: aqua;
	}
</style>